<template>
  <view>
    <!-- 头部 -->
    <view class="navbar">
      <view
        v-for="(item, index) in navList"
        :key="index"
        class="nav-item"
        :class="{ current: tabCurrentIndex === item.key }"
        @click="tabClick(item)"
      >
        {{ item.text }}
      </view>
    </view>
    <view v-if="tabCurrentIndex == 'info'">
      <uni-list>
        <uni-list-item
          v-for="item in formOption"
          :key="item.prop"
          :title="item.label"
          :note="detailData[item.prop]"
        >
        </uni-list-item>

        <uni-list-item title="隐患分类" :note="detailData.hiddenType">
        </uni-list-item>
        <uni-list-item title="整改责任人" :note="detailData.rectificationUserName">
        </uni-list-item>
        <uni-list-item title="复核人" :note="detailData.reviewUserName">
        </uni-list-item>
        <uni-list-item title="照片">
          <template #body>
            <view style="width: 3.5714rem"> 照片 </view>
            <Imgs :imgs="files"></Imgs>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <view v-else-if="tabCurrentIndex == 'zg'">
      <VForm
        v-if="dataState == 0"
        ref="vform"
        :formOption="[]"
        @onSubmit="onZgSubmit"
      >
        <template #last="{ form }">
          <uni-forms-item label="罚款金额" name="hiddenCheckPay">
            <uni-easyinput v-model="form.hiddenCheckPay"> </uni-easyinput>
          </uni-forms-item>
          <uni-forms-item
            required
            label="整改完成描述"
            name="hiddenCompleteInfo"
          >
            <uni-easyinput type="textarea" v-model="form.hiddenCompleteInfo">
            </uni-easyinput>
          </uni-forms-item>
          <uni-forms-item label="整改附件" name="files">
            <Camera v-model="zgFiles" :limit="1"> </Camera>
          </uni-forms-item>
        </template>
      </VForm>
      <uni-list v-else>
        <uni-list-item title="罚款金额" :note="detailData.hiddenCheckPay">
        </uni-list-item>
        <uni-list-item
          title="整改完成描述"
          :note="detailData.hiddenCompleteInfo"
        >
        </uni-list-item>
        <uni-list-item title="整改时间" :note="detailData.hiddenCompleteTime">
        </uni-list-item>
        <uni-list-item title="整改责任人" :note="detailData.rectificationUserName">
        </uni-list-item>
        <uni-list-item title="复核人" :note="detailData.reviewUserName">
        </uni-list-item>
        <uni-list-item title="照片">
          <template #body>
            <view style="width: 3.5714rem"> 附件 </view>
            <Imgs :imgs="zgFiles"></Imgs>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <view v-else-if="tabCurrentIndex == 'fh'">
      <VForm
        v-if="dataState == 1"
        ref="vform"
        :formOption="[]"
        @onSubmit="onFhSubmit"
      >
        <template #last="{ form }">
          <!-- <uni-forms-item required label="复核结果" name="hiddenProgress">
            <uni-easyinput type="text" v-model="form.hiddenProgress">
            </uni-easyinput>
          </uni-forms-item> -->
          <uni-forms-item required label="复核完成情况" name="hiddenReviewInfo">
            <uni-easyinput type="textarea" v-model="form.hiddenReviewInfo">
            </uni-easyinput>
          </uni-forms-item>
        </template>
      </VForm>
      <uni-list v-else>
        <uni-list-item title="复核完成情况" :note="detailData.hiddenReviewInfo">
        </uni-list-item>
        <uni-list-item title="复核人" :note="detailData.reviewUserName">
        </uni-list-item>
        <uni-list-item title="复核时间" :note="detailData.hiddenReviewTime">
        </uni-list-item>
      </uni-list>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      row: {},
      id: null,
    };
  },
  onLoad(payload) {
    this.row = JSON.parse(decodeURIComponent(payload.row))
   
    console.log(this.row, 'this.row')

    // if (payload.row) {
    //   this.isAdd = false;
    //   this.row = JSON.parse(decodeURIComponent(payload.row));
    // } else if (payload.id) {
    //   this.id = payload.id;
    // } else {
    //   // this.isAdd = true;
    // }
  },
};
</script>

<script setup>
import { ref, getCurrentInstance, onMounted, watch } from "vue";
import Imgs from "@/components/forImgs.vue";
import formJson from "./options.json";
import VForm from "@/components/uniForm.vue";
import { useFormJson } from "@/hooks/jsonToForm.js";
import { apis as APIS } from "@/api/yhpc/yhdj.js";
import Camera from "@/components/camera.vue";
import { router } from "@/router/index.js";
const tabCurrentIndex = ref("info");
const tabClick = (item) => {
  tabCurrentIndex.value = item.key;
};
const navList = ref([
  { text: "隐患信息", key: "info" },
  { text: "整改内容", key: "zg" },
  { text: "复核内容", key: "fh" },
]);
const formOption = ref(
  useFormJson(formJson, {
    sort: [],
    sortable: [],
  })
);
const rowData = ref({});
const files = ref([]);
const zgFiles = ref([]);
const dataState = ref(0);
const detailData = ref({});

onMounted(async () => {
  const { row } = getCurrentInstance().data;
  rowData.value = row
  dataState.value = row.dataState
  if (row.id) {
    // 隐患详情
    const res = await APIS.getHiddenDetail(row.id);
    detailData.value = res.data;
  } 
  // else {
  //   rowData.value = row;
  // }
  // if (rowData.value.hiddenReviewInfo) {
  //   dataState.value = 2;
  // } else if (rowData.value.hiddenCompleteInfo) {
  //   dataState.value = 1;
  // }
  files.value = detailData.value.fileManageList;

  if (detailData.value.completeHiddenFileId) {
    zgFiles.value = [
      {
        fileName: detailData.value.completeHiddenFileName,
        id: detailData.value.completeHiddenFileId,
        fileUrl: detailData.value.completeHiddenFileUrl,
      },
    ];
  }
});


const fileForm = ref({});
watch(
  () => zgFiles,
  (newData) => {
    if (newData.value.length === 0) {
      fileForm.value.completeHiddenFileName = "";
      fileForm.value.completeHiddenFileId = "";
      fileForm.value.completeHiddenFileUrl = "";
    } else {
      fileForm.value.completeHiddenFileName = newData.value[0].fileName;
      fileForm.value.completeHiddenFileId = newData.value[0].id;
      fileForm.value.completeHiddenFileUrl = newData.value[0].fileUrl;
    }
  },
  {
    deep: true,
  }
);


const onZgSubmit = (data) => {
  if (data.hiddenCompleteInfo) {
    APIS.getHiddenRepair({
      hiddenInventoryId: rowData.value.id,
      ...data,
      ...fileForm.value,
    }).then((res) => {
      uni.showToast({
        title: "操作成功",
        icon: "error",
      });
      router.back();
    });
  } else {
    uni.showToast({
      title: "请填写整改情况/退回原因",
      icon: "error",
    });
  }
};
const onFhSubmit = (data) => {
  if (data.hiddenReviewInfo) {
    APIS.getHiddenReview({
      hiddenInventoryId: rowData.value.id,
      ...data,
    }).then((res) => {
      uni.showToast({
        title: "操作成功",
        icon: "error",
      });
      router.back();
    });
  } else {
    uni.showToast({
      title: "请填复核情况",
      icon: "error",
    });
  }
};
</script>

<style lang="scss">
.content {
  height: 100%;
}

.navbar {
  display: flex;
  height: 40px;
  padding: 0 5px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;

  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 15px;
    position: relative;

    &.current {
      color: blue;

      &:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 44px;
        height: 0;
        // border-bottom: 2px solid $base-color;
      }
    }
  }
}
</style>
